@use '../core' as *;

.chart {
    vertical-align: bottom;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    :global(.ag-chart-wrapper) {
        border: 2px solid var(--color-brand-100);
        border-radius: var(--radius-sm);
        box-sizing: border-box;
        overflow: hidden;
    }

    &.fullscreen {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        z-index: 200;
        padding: 0;
        background: white;
    }
}

.close {
    --color-icon: var(--color-link);

    position: fixed;
    top: 0px;
    right: 2px;
    z-index: 201;

    &:hover {
        --color-icon: var(--color-link-hover);
    }

    svg {
        transition: fill $transition-default-timing;
    }
}
